<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>WORKERSHOW</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap-table.min.css" rel="stylesheet">
    <style>
        body {
            background: url('${pageContext.request.contextPath}/static/img/wall2.png') no-repeat center center fixed;
            background-size: cover;
            color: #fff;
        }
        .card {
            background-color: rgb(255, 255, 255); /* 半透明紫色背景 */
            border: none;
        }
        .card-header {
            background-color: rgba(75, 0, 130, 0.9); /* 深紫色 */
        }
        .btn {
            color: #fff;
        }
        .btn-success {
            background-color: #6a0dad; /* 紫色 */
            border-color: #6a0dad;
        }
        .btn-success:hover {
            background-color: #8a2be2; /* 较浅紫色 */
            border-color: #8a2be2;
        }
        .btn-danger {
            background-color: #b30059; /* 紫红色 */
            border-color: #b30059;
        }
        .btn-danger:hover {
            background-color: #e0115f; /* 较浅紫红色 */
            border-color: #e0115f;
        }
        table th {
            background-color: rgba(75, 0, 130, 0.9); /* 深紫色 */
        }
        table td {
            background-color: rgba(128, 0, 128, 0.6); /* 半透明紫色 */
        }
        input.form-control {
            background-color: rgba(255, 255, 255, 0.8); /* 半透明白色 */
            color: #000; /* 黑色文字 */
        }
        input.form-control:focus {
            background-color: rgba(255, 255, 255, 1); /* 不透明白色 */
        }
    </style>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap-table.min.js"></script>
    <script>
        $(function () {
            $("#table").bootstrapTable('destroy');
            $("#table").bootstrapTable({
                search: true,
                pagination: true,
                pageSize: 5
            });
        });

        function deleteWorker(id) {
            $.ajax({
                url: "deleteWorker.action",
                data: {"id": id},
                success: function () {
                    location.reload();
                    alert("Delete success!");
                }
            });
        }

        function updateWorker(id) {
            const username = $("#username" + id).val();
            const password = $("#password" + id).val();
            if (username === "" || password === "") {
                alert("Username or password cannot be empty");
                return false;
            }
            $.ajax({
                url: "updateWorker.action",
                data: {"id": id, "username": username, "password": password},
                success: function () {
                    alert("Update success!");
                }
            });
        }
    </script>
</head>
<body>
<div class="container mt-4">
    <div class="card">
        <div class="card-header text-white">
            <h4 class="mb-0 text-center">Worker Management</h4>
        </div>
        <div class="card-body">
            <table id="table" class="table table-striped table-hover">
                <thead>
                <tr class="text-white">
                    <th>ID</th>
                    <th>Username</th>
                    <th>Password</th>
                    <th>Update</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${list}" var="worker">
                    <tr>
                        <td>${worker.id}</td>
                        <td>
                            <input type="text" class="form-control form-control-sm" value="${worker.username}" id="username${worker.id}">
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm" value="${worker.password}" id="password${worker.id}">
                        </td>
                        <td>
                            <button class="btn btn-success btn-sm" onclick="updateWorker(${worker.id})">Update</button>
                        </td>
                        <td>
                            <button class="btn btn-danger btn-sm" onclick="deleteWorker(${worker.id})">Delete</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
